<template>
  <div class="swiper">
    <van-swipe :autoplay="3000" lazy-render indicator-color="#fff">
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { getBanners } from "@/api/home";
import { onMounted, reactive, toRefs } from "vue";
export default {
  setup() {
    const bannerList = reactive({
      images: [],
    });
    onMounted(async () => {
      let res = await getBanners();
      bannerList.images = res.data.banners;
    });
    return {
      ...toRefs(bannerList),
    };
  },
};
</script>

<style scoped lang="less">
.swiper {
  .van-swipe {
    border-radius: 6px;
    .van-swipe-item {
      height: 200px;
      border-radius: 6px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }
  }
}
</style>
